<style scoped>
	/* 视图盒子 */
	.view-box{position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1000; }
	/* EAEFF3 */
	.bg-1{height: 50%; background: linear-gradient(to bottom right, #0466c5, #3496F5);}
	.bg-2{height: 50%; background-color: #EAEFF3;}

	.login-box{width: 400px; height: 400px; position: absolute; left: calc(50% - 200px); top: calc(50% - 250px); }
	/* .login-box{} */


	/* logo */
	.login-top{margin-bottom: 40px; text-align: center; }
	.logo-img{width: 50px; height: 50px; vertical-align: middle;border-radius: 50%; margin-left: -10px; margin-right: 20px;}
	.logo-img{ position: relative; top: -5px; }
	.admin-title{font-size: 28px; color: #FFF; font-weight: 700;}

	/* 表单 */
	.from-box{padding: 20px 50px; background-color: #FFF;}
	.from-box{ border-radius: 1px; box-shadow: 1px 1px 2px #666;}
	.from-title{margin-top: 20px; margin-bottom: 30px; text-align: center;}

</style>
<template>
	<div class="view-box" v-if="isShow">
		<div class="bg-1"></div>
		<div class="bg-2"></div>
		<div class="login-box">
			<div class="login-box-2">
				<div class="login-top">
					<img src="./../index/admin-logo.png" class="logo-img">
					<span class="admin-title">E-冥白人共享车位</span>
				</div>
				<div class="from-box">
					<h3 class="from-title">账号登录</h3>
					<el-form size="small" label-position="left" label-width="0px">
						<el-form-item>
							<el-input prefix-icon="el-icon-user" v-model="m.username" placeholder="请输入账号"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input prefix-icon="el-icon-unlock" v-model="m.password" type="password" placeholder="请输入密码" @keyup.native.enter="ok()"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="small" style="width: 100%;" @click="ok()">登录</el-button>
						</el-form-item>
						<el-form-item>
              <el-button type="primary" size="small" style="width: 100%;background-color: #EEEEEE; color: black" @click="register()">注册</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		<!-- 底部 版权 -->
		<div style="position: absolute; bottom: 40px; width: 100%; text-align: center; color: #666;">
			Copyright ©1979 sa-admin模板 | 网络科技有限公司 - 提供技术支持
		</div>
    <div class="modal" id="modal-one" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-header" style="text-align: center">
          <h2 style="color: brown">登录成功！</h2>
          <h2>选择你要登录的身份</h2>
          <!--        <a href="#" class="btn-close" aria-hidden="true">×</a> -->
        </div>
        <div class="modal-body">
          <div class="bigButtons1" v-on:click="choos(2)">
            <i class="el-icon-truck"></i>
            车主
          </div>
          <div class="bigButtons2" v-on:click="choos(1)">
            <i class="el-icon-office-building"></i>
            业主
          </div>
        </div>
        <div class="modal-footer">
          <a href="/#2-4" class="btn">返回</a>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		name: 'sa-login',
		data() {
			return {
				isShow: false,	// 是否显示当前视图
				m: {
					username: '',
					password: ''
				}
			}
		},

    methods: {
			// 点击确定
			ok() {
				// 表单验证
				if(this.m.username == '' || this.m.password == '' ) {
					return this.sa.error2('请输入完整');
				}
				// 开始登录
        this.sa.ajax("/e-user/user/login",{
              "uaccount" :this.m.username,
              "upass" :this.m.password,
            },
            function (resp){
              if(resp.code==200){
                localStorage.setItem("token",resp.data.token);
                localStorage.setItem("role",resp.data.role);
                localStorage.setItem("uid",resp.data.uid);
                if(resp.data.role==0){
                  this.moda();
                }else if(resp.data.role==1){
                    var tab = {id: '4-2', name: "物业管理", view: () => import('@/sa-view/case/propertylist.vue')};
                    this.sa_admin.showTab(tab);
                    this.sa_admin.closeLogin();
                }else if(resp.data.role==4){
                  var tab1 = {id: '2-1', name: "物业功能", view: () => import('@/sa-view/login/Property_Information.vue')};
                  this.sa_admin.showTab(tab1);
                  this.sa_admin.closeLogin();

                }
              }else{
                alert("登录失败，请检查输入的账号与密码");
              }
            }.bind(this),
            {type : 'post'}
        )
      },
      moda(){
        window.location.href="#modal-one"
      },
      choos(num){
        if(num==1){
          this.getUserNum(2);
          var tab = {id: 'Selection_Function', name: "功能选择界面", view: () => import('@/sa-view/login/Selection_Function.vue')};
          this.sa_admin.showTab(tab);
          this.sa_admin.closeLogin();
        }
        if(num==2){
          this.getUserNum(3);
          var tab1 = {id: 'Selection_Function', name: "功能选择界面", view: () => import('@/sa-view/wmy/Selection_Function.vue')};
          this.sa_admin.showTab(tab1);
          this.sa_admin.closeLogin();
        }
      },
      regist(){
        alert("p");
      },
      getUserNum(num){
          localStorage.setItem('role',num)
        var i = localStorage.getItem("token")
        this.sa.ajax("/e-user/user/getUserNum/"+i+"/"+num,{},function (){

            }.bind(this),
            {type : 'post'}
        )
      },
      //注册方法,应该在此处跳转页面

      register: function() {
        //this.$refs['sa-register'].isShow = true;
       this.sa_admin.openRegister();
      },
		}
	}
</script>
<style scoped>

.btn {
  background: #428bca;
  border: #357ebd solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
}
.btn:hover {
  background: #357ebd;
}
.btn.btn-big {
  font-size: 18px;
  padding: 15px 20px;
  min-width: 100px;
}
.btn-close {
  color: #aaa;
  font-size: 30px;
  text-decoration: none;
  position: absolute;
  right: 5px;
  top: 0;
}
.btn-close:hover {
  color: #919191;
}
.modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 10%;
}
.modal-dialog {
  background: #fefefe;
  border: #333 solid 1px;
  border-radius: 5px;
  margin-left: -120px;
  position: fixed;
  left: 40%;
  top: -100%;
  z-index: 11;
  width: 40%;
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal-body {
  padding: 10px 20px;
  height: 200px;
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
  border-bottom: #eee solid 1px;
}
.modal-header h2 {
  font-size: 20px;
}
.modal-footer {
  border-top: #eee solid 1px;
  text-align: right;
}
.bigButtons1{
  padding-left: 15%;
  padding-top: 18%;
  height: 58%;
  width: 30%;
  color: white;
  float: left;
  background-color: gray;
  font-size: 140%;
  border-radius: 8px;
  border: 5px solid  gray;
}
.bigButtons1:hover{
  border: 5px solid  #de9830;

}
.bigButtons2{
  padding-left: 15%;
  padding-top: 18%;
  height: 58%;
  width: 30%;
  color: white;
  float: right;
  background-color: #de9830;
  font-size: 140%;
  border-radius: 8px;
  border: 5px solid #de9830;
}
.bigButtons2:hover{
  border: 5px solid gray;
}
</style>

